<template>
<div  class="mui-content mui-scroll-wrapper" style="padding-top: 0px">
    <div class="mui-scroll">
         <!-- 返回菜单 -->
        <header  class="mui-bar mui-bar-nav">
          <span  @tap="gtolast()" class="iconfont icon-fanhui header_fanhui" style="color:#333333;line-height: 43px;font-size: 0.9rem;width:50px;"></span>
          <h1 class="mui-title">资讯详情</h1>
          <span class="iconfont icon-fenxiang-01 search-right" v-show="$store.state.appData.wxShow" @tap="shareShow()"></span>
        </header>
        <!--<img :src="thsobj.img" alt="">-->
        <div class="offer-cont">
            <!-- <div class='offer-head'>
                <div class="guanzhu" >+ 关注</div>
            </div> -->

            <!-- 横线分隔条 -->
            <!-- <cross-line></cross-line> -->
            <h4 style="margin-top:10px;margin-left:15px;margin-right:15px;line-height:25px;">{{news.title}}</h4>
            <div style="margin-left:15px;margin-top:-5px;">{{formatTime(news.createTimeInt)}}</div>
            <!-- <img  style="width:100%" :src="$store.state.appData.imgUrl+news.pic"/> -->
               <!--  <div class="button" @click="shareShow()">分 享</div> -->
            <!-- 内容 -->
            <div class="" v-html="news.content">
                {{news.content}}
            </div>
        </div>
        <!--<div class="closmodel icon-cha" @tap="change"></div>-->
    </div>
</div>
</template>

<script>
    import 'animate.css/animate.css'
    import CrossLine from '@/components/base/cross-line/cross-line'
    import mui from 'static/js/mui'
    import utils from '@/utils/utils'
    import storage from '@/utils/localstorage'
    export default {
        components: {
            CrossLine
        },
        data() {
            return {
                news:{},
                data: {},
                shares: null,
                wxShow: true
            } 
        },
        props: {//也可以是对象，允许配置高级设置，如类型判断、数据校验、设置默认值
            showoffer: {
                type: Boolean,
                default: true
            },
            thsobj: {
                type: Object
            }
        },
        methods: {
            getParams() {
                //获取路由参数'
                let routeVal = this.$route.params
                if(JSON.stringify(routeVal)!=="{}"){
                    if(typeof(routeVal.news) !== 'undefined'){
                        this.news = routeVal.news
                        console.log(this.news)
                    }
                }
            },
            //返回上一层
            gtolast(){        
                this.$router.push({
                    path: '/carInfo'
                })
            },
            formatTime(time){
                try{
                    return utils.time.formatDatetwo(time)
                    }catch(e){
                    '逻辑错误，期货拼单历史返回问题'
                }
            },
           // 打开分享
            shareShow(){
                //首图
                let pic = process.env.PATH_INDEX_PIC + this.news.pic
                //缩略图
                let thumbnailPic = process.env.PATH_INDEX_PIC + this.news.thumbnailPic
                let userId = storage.getLocalstorage('user').id
                let id = this.news.id
                //链接
                let href='http://we.cnupai.cn/news/news.html?id='+id+'&userId='+userId; 
                //头
                let title= this.news.title;
                //内容
                let content= this.news.shortContent;
                let data = {href: href, pic: pic, id: id, userId: userId, title: title, shortContent: content, thumbnailPic: thumbnailPic}
                utils.h5Plus.shareShow(data)
            },
            /**
            * 更新分享服务
            */
            updateSerivces () {
                let that = this
                plus.share.getServices(function (s) {
                    // 判断是否安装微信
                    /* var WXApi = plus.ios.import("WXApi");
                        var isWXInstalled = WXApi.isWXAppInstalled();
                        if(!isWXInstalled){
                        that.wxShow = false
                    } */
                    window.shares = {}
                    for (var i in s) {
                    var t = s[i]
                    window.shares[t.id] = t;
                    }
                    console.log(window.shares)
                }, function (e) {
                    console.log('获取分享服务列表失败：' + e.message);
                })
            }
        },
        created() {
            let that = this
            function plusReady () {
                that.updateSerivces();
            }
            if (window.plus) {
                plusReady();
            } else {
                document.addEventListener('plusready', plusReady, false);
            }
            this.getParams()
        },
        mounted() {
            //监听下左拖动
            /* let that=this;
            document.getElementById('cc').addEventListener('swiperight',
                function(){
                   that.$emit('update:showoffer', false);
                }
            ) */
            //初始化mui
			mui.init({
                keyEventBind: {
                backbutton: true  //关闭back按键监听
                }
            })
            mui.back = function () {
                history.go(-1)
            }
            mui('.mui-scroll-wrapper').scroll({
                scrollY: true, //是否竖向滚动
                scrollX: false, //是否横向滚动
                startX: 0, //初始化时滚动至x
                startY: 0, //初始化时滚动至y
                indicators: false, //是否显示滚动条
                deceleration: 0.0006, //阻尼系数,系数越小滑动越灵敏
                bounce: false //是否启用回弹
            });
        },
        destroyed() {
            window.shares = null
        },
    }

</script>

<style scoped>
    .offerDetail {
        position: fixed;
        top: 0px;
        left: 0px;
        bottom:0px;
        width: 100%;
        background-color: #fff;
        z-index: 11;
        color: #333;
        text-align: center;
        font-size: 1.5em;
    }

    .offerDetail img {
        width: 100%;
        height: 250px;
    }

    .offerDetail .offer-cont {
        width: 100%;
        height: 100px;
    }
    .offer-cont{
        background: #fff;
        margin-top:44px;
    }
    .offerDetail .offer-cont .offer-head {
        height: 60px;
        width: 100%;
        background: #fff;
        text-align: left;
        padding: 8px;
        font-size: 0.8rem;
        position: relative;
    }

    .offerDetail .offer-cont .offer-head .guanzhu {
        font-size: 0.65rem;
        position: absolute;
        bottom: 3px;
        right: 10px;
        color: red;
    }

    .closmodel {
        text-align: center;
        width: 30px;
        height: 30px;
        border: 2px solid #007aff;
        border-radius: 100%;
        line-height: 25px;
        position: absolute;
        left: 10px;
        top: 10px;
        color: #007aff;
    }
    .text-content{
        padding-left:15px;
        padding-right:15px;
    }

    /* 头部导航 */
    header {
        box-shadow: 0 0px 0px #ccc !important;
        border-bottom:0px!important;
    }

    .search-right {
        color: #333333 !important;
        font-size: 0.9rem;
        float: right;
        line-height:43px;
        width: 100px;
        text-align: right;
    }
    .mui-bar.mui-bar-nav {
        height: 30px;
    }

    .mui-bar .mui-icon {
        padding-top: 5px;
        padding-bottom: 5px;
        font-size: 1rem;
        color: #fff;
    }

    .mui-off-canvas-wrap.mui-active .mui-off-canvas-backdrop {
        box-shadow: none;
    }

    .mui-bar-nav~.mui-content {
        padding-top: 0px;
    }
</style>